<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/jsp/struts/taglibs.jsp"%>
<head>
<script type="text/javascript"  src="script/prototype.js"></script>
<script type="text/javascript"  src="script/common.js"></script>
<link href="./style/alternative.css" media="all" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="all" href="script/jscalendar-1.0/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<link rel="stylesheet" type="text/css" href="./style/tabview.css" />
<script type="text/javascript" src="script/tabview.js"></script>
<script type="text/javascript" src="script/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="script/jscalendar-1.0/lang/calendar-zh.js"></script>
<script type="text/javascript" src="script/jscalendar-1.0/calendar-setup.js"></script>
<style type="text/css">
#taskList {
    margin-top:1em;
}
#taskList li {
    list-style-image: url("images/edit.gif");
    list-style-position:inside
}
#todoList {
border: 2px broove #eee;
margin-top: 1em;
line-height:1.2em;
}
#todoList th{
text-align:center;
font-size:0.9em;
font-family: Arial black;
}
#todoList td{
border: 1px solid #ccc;
font-size:0.9em;
font-weight:bold;
line-height:1.2em;
}
.tabButton {
    background-color: #eeeeee;
    font-weight: bold;
    vertical-align: top;
    line-height: 16pt;
    font-size:14px;
    font-family:Arial
}

.tabCodes td{
    font-size:12px;
    font-family:Verdana;
    border-bottom:1px solid #99CCFF;
}
.tabCodes a{
    color:black;
    font-family:Verdana;
    font-size:14px;
}
.tabCodes th{
    font-size:14px;
    font-family:Verdana;
    border:1px solid #99CCFF;
}

</style>
</head>
<div id="content">
<div id="content_inner">
<table width="95%" class="its" id="taskList">
<c:forEach items="${taskMap}" var="entry" varStatus="timeStatus">
<c:if test="${timeStatus.index ==0}">
<tr>
<td rowspan="25" valign="top" width="40%">
<div id="calendar-container"></div>
<display:table htmlId="todoList" name="todoList" sort="list" 
     class="its" id="task" requestURI="calendar.htm">
<display:setProperty name="basic.empty.showtable" value="true" />
<display:setProperty name="basic.msg.empty_list_row" value="<tr class='empty'><td colspan='{0}'>没有到期任务</td></tr>"/>    
<display:column style="width:40%" title="到期事项" sortable="true" headerClass="sortable">
<a href="task.htm?method=retrieve&taskID=${task.taskID}">${task.taskName}</a>
</display:column>
<display:column style="width:10%" property="priority" title="优先级" sortable="true" headerClass="sortable"/>
<display:column style="width:20%" title="时间" sortable="true" headerClass="sortable">
<c:choose>
<c:when test="${task.duration >= 1440}">
<fmt:formatNumber value="${task.duration/1440}" type="number" maxFractionDigits="2"/>天
</c:when>
<c:when test="${task.duration >= 60}">
<fmt:formatNumber value="${task.duration/60}" type="number" maxFractionDigits="2"/>小时
</c:when>
<c:otherwise>
${task.duration}分钟
</c:otherwise>
</c:choose>
</display:column>
<display:column style="width:30%" title="完成时间" sortable="true" headerClass="sortable">
<fmt:formatDate value="${task.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/> 
</display:column>
</display:table>
</td>
</tr>
</c:if>
<tr 
<c:choose>
<c:when test="${timeStatus.index % 2 ==0}">
class="even"
</c:when>
<c:otherwise>
class="odd"
</c:otherwise>
</c:choose>
><td width="8%" style="text-align:center;font-weight:bold;font-size:11px">
<fmt:formatDate value="${entry.key}" pattern="HH:mm"/>
</td>
<td>
<ul>
<c:forEach items="${entry.value}" var="task" varStatus="taskStatus">
<li><a href="task.htm?method=retrieve&taskID=${task.taskID}">${task.taskName}</a>
</c:forEach></ul>
</td></tr>
</c:forEach>
</table>
</div><!-- end content_inner -->
</div><!-- end content -->
<script type="text/javascript">
  function dateChanged(calendar) {
    // Beware that this function is called even if the end-user only
    // changed the month/year.  In order to determine if a date was
    // clicked you can use the dateClicked property of the calendar:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
      // redirect...
      //window.location = "/" + y + "/" + m + "/" + d + "/index.php";
      //alert("it's " + y + "-" + m + "-" + d);
      location.href = "calendar.htm?period="+y + "-" + (m+1) + "-" + d;
    }
  }
    
    Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged,           // our callback function
      date: new Date(${curMS})
    }
  );
 </script>